<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        .container{
            position: relative;
            margin: 20px;
            border: 1px solid;
            height: 2000px;

        }
        .box {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 5px solid;
            /* margin: 10px; */
            background: red;
            position: absolute;
            left: 50px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
    <div class="box"></div>

    </div>
    <button>点击</button>
    <script>
        // 元素尺寸 ：
        // 1.元素的宽和高； width 和 height  元素自身的宽和高 
        // $("button").click(function(){
        //     // 
        //   console.log(   $(".box").width());
        //     console.log( $(".box").height());

        // })

        // 2.innerWidth/innerHeight 可以获取自身的宽高 + padding
        // $("button").click(function(){
        //     console.log($(".box").innerWidth());
        //     console.log($(".box").innerHeight());
        // })

        // 3.获取outerWidth/outerHeight:  自身 + padding + border 的宽和高  默认参数是false 不包含 margin
        // $("button").click(function(){
        //     console.log($(".box").outerWidth());
        //     console.log($(".box").outerHeight());
        // })

        // 4.获取 outerWidth/outerHeight: 自身 + padding + boder + margin 的宽和高； 设置参数为true 包含margin

        // $("button").click(function(){
        //     console.log($(".box").outerWidth(true));
        //     console.log($(".box").outerHeight(true));
        // })


        // 5. 获取元素距离 页面的偏移量 offset(); 
        // 设置偏移量；
        // $("button").click(function () {
        //     // 获取 
        //     //   let res =   $(".box").offset();
        //     //   console.log(res);
        //     $(".box").offset({ left: 100, top: 200 });
        // })

        // 6.获取相对于父级的偏移量 position(); 只能获取不能设置；
        // $("button").click(function () {
        //     let res =  $(".box").position();
        //     console.log(res);
        // })


        // 7. 获取或者设置 元素的卷去高度； scrollTop = 100;
        // 可以获取 ，且可以设置；
        $("button").click(function(){
        //    let res = $(document).scrollTop();
        //    console.log(res);
        $(document).scrollTop(100)
        })



    </script>
</body>

</html>